<template>
  <div class="city">
    <div class="city-header">
      <div class="header-left">
        <router-link to="/">
          <i class="iconfont icon-fanhui"></i>
        </router-link>
      </div>
      <div class="header-title">
        城市选择
      </div>
    </div>
    <div class="header-tab">
      <div class="ht-content">
        <span :class="{'active' : index == btnStatus}" @click="btnChange (index)" v-for="(item, index) in cityBtnList" :key="item.id">{{item.name}}</span>
      </div>
    </div>
    <div class="content" :class="{'con_act' : index == btnStatus}" v-for="(value, key, index) in hotCityList" :key="index">
      <h4>热门城市</h4>
      <div class="city-list">
        <!-- <router-link v-for="item of value" :key="item.id"  :to="'/?city='+item.name">{{item.name}}</router-link> -->
        <a href="javascript:void(0);" v-for="item of value" :key="item.id"  @click="cityClick(item.name)">{{item.name}}</a>
      </div>
      <h4>字母排序</h4>
      <div class="zm-list"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'City',
  data () {
    return {
      btnStatus: 0,
      contentList: [
        {
          id: '1',
          name: '北京'
        },
        {
          id: '2',
          name: '伦敦'
        }
      ],
      cityBtnList: [
        {
          id: '1',
          name: '境内',
          content: '北京'
        },
        {
          id: '2',
          name: '境外·港澳台',
          content: '伦敦'
        }
      ],
      hotCityList: {
        jn: [
          {
            id: '1',
            name: '北京'
          },
          {
            id: '2',
            name: '上海'
          },
          {
            id: '3',
            name: '北京'
          },
          {
            id: '4',
            name: '三亚'
          },
          {
            id: '5',
            name: '杭州'
          },
          {
            id: '6',
            name: '香港'
          },
          {
            id: '7',
            name: '广州'
          },
          {
            id: '8',
            name: '成都'
          },
          {
            id: '9',
            name: '深圳'
          },
          {
            id: '10',
            name: '厦门'
          },
          {
            id: '11',
            name: '西安'
          }
        ],
        jw: [
          {
            id: '1',
            name: '澳门'
          },
          {
            id: '2',
            name: '台湾'
          },
          {
            id: '3',
            name: '香港'
          },
          {
            id: '4',
            name: '曼谷'
          },
          {
            id: '5',
            name: '新加坡'
          },
          {
            id: '6',
            name: '首尔'
          },
          {
            id: '7',
            name: '东京'
          },
          {
            id: '8',
            name: '济州岛'
          },
          {
            id: '9',
            name: '巴厘岛'
          },
          {
            id: '11',
            name: '米兰'
          },
          {
            id: '10',
            name: '伦敦'
          }
        ]
      }
    }
  },
  methods: {
    btnChange: function (_index) {
      this.btnStatus = _index
    },
    cityClick: function (test1) {
      this.$router.push({
        name: 'Home',
        params: {
          textCity: test1,
          test: 123
        }
      })
    }
  }
}
</script>

<style scoped lang="stylus">
  @import '~@/assets/stylus/varibles.styl'
.city
  .city-header
    height: .68rem
    background-color: $bgColor
    align-items: center
    line-height: .68rem
    .header-left
      a
        color: #fff
        i{
          display: block
          position: absolute
          left: .1rem
        }
    .header-title
      width: 100%
      font-size: .32rem
      color: #fff
      text-align: center
  .header-tab
    width: 100%
    height: 0.6rem
    background-color: #00bcd4
    padding-top: .1rem
    .content
      display: none
    div.show
      display: block
    .ht-content
      width: 4.4rem
      margin: 0 auto
      border: 1px solid #fff
      display: flex
      justify-content: space-around;
      span
        font-size: .32rem
        color: #fff
        padding: .05rem 0
        display: block;
        width: 100%;
        text-align: center;
      span.active
        color: #00bcd4
        background-color: #fff
  div.con_act
    display block
  .content
    width 100%
    background-color #f5f5f5
    display none
    h4
      font-size .24rem
      padding .24rem .3rem
    .city-list
      display flex
      flex-wrap wrap
      background-color #fff
      box-sizing border-box
      overflow hidden
      a
        font-size .28rem
        width 33.333%
        display block
        text-decoration none
        color #333
        height .92rem
        line-height .92rem
        text-align center
        border-bottom 1px solid #ccc
        border-right 1px solid #ccc
        margin-right -1px
        margin-bottom -1px
</style>
